<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对角线</title>
  <style>
    .container {
      width: 200px;
      height: 100px;
      display: flex;
      justify-content: center;
    }
    .box {
      width: 100%;
      height: 100%;
      border: 1px solid #666;
      position: relative;
      background: linear-gradient(
        to top right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 1px),
        #999 50%,
        rgba(0, 0, 0, 0) calc(50% + 1px),
        rgba(0, 0, 0, 0) 100%
      )
    }
    .row {
      position: absolute;
      top: 0;
      right: 0;
    }
    .column {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <span class="row">哈哈</span>
      <span class="column">嘿嘿</span>
    </div>
  </div>
</body>
</html>
<script>
  /*
  * .box {
      width: 100%;
      height: 100%;
      border: 1px solid #666;
      position: relative;
      background: linear-gradient(
        to top right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 1px),
        #999 50%,
        rgba(0, 0, 0, 0) calc(50% + 1px),
        rgba(0, 0, 0, 0) 100%
      ), linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 1px),
        #999 50%,
        rgba(0, 0, 0, 0) calc(50% + 1px),
        rgba(0, 0, 0, 0) 100%
      );
    }
  * */
</script>
